<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
	
	<link rel="stylesheet" href="assets/css/element-ui.css" />
	
	<style>
	  .text {
		font-size: 14px;
	  }
	
	  .item {
		padding: 18px 0;
	  }
	
	  .box-card {
		  width: 866px;
	  }
	</style>
<!-- jquery -->
	<script src="assets/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		<!-- 导航栏的JS-开始 -->
		var itemHost = "http://localhost:3001/itemservice"
		//文档就绪
		$(function(){
			getItemCat();
		})
		//获取二级分类菜单，循环遍历添加菜单
		function getItemCat(){
			$.ajax({
				type:"get",
				url: itemHost + "/itemCat/getAll",
				success: function(result){
					if(result.status == 200){
						//console.log(result.data)
						var itemCatList = result.data
						//遍历一级分类菜单
						for(var i in itemCatList){
							var itemCatOne = itemCatList[i]
							var itemCatOneChildren = itemCatOne.children
							//遍历二级分类菜单
							if(i==0){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#dog").append(
										`
											<li><a class="a" onclick="dogItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==1){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#cat").append(
										`
											<li><a class="a" onclick="catItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
							if(i==2){
								for(var j in itemCatOneChildren){
									var itemCatTwo = itemCatOneChildren[j]
									$("#other").append(
										`
											<li><a class="a" onclick="otherItem(${itemCatTwo.id})">${itemCatTwo.name}</a></li>
										`
									)
								}
							}
						}
					}					
				}
			})
		}
		//点击狗狗分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function dogItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击猫咪分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function catItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击其他分类的某一个二级菜单，会获取item表中item_cat_id为此id的商品，并显示在shop.html页面
		function otherItem(id){
			$.ajax(itemHost+`/item/getData/${id}`)
			window.location.href="shop.html"
		}
		//点击搜索框触发
		function searchItem(){
			let keyword = $("#search").val()
			$.ajax({
				type: "get",
				url: itemHost+"/item/search",
				data: {
					keyword:keyword
				},
				success: function(result){
					if(result.status==200){
						window.location.href = "shop.html"
					}
				}
			})
		}
		//退出登录
		function logout(){
			if(localStorage.getItem("accessToken") == null){
				alert("您还没有登录")
			}else{
				localStorage.removeItem("accessToken")
				localStorage.removeItem("refreshToken")
				sessionStorage.removeItem("userName")
				window.location.href = "index.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到account.html页面 */
		function accountAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "account.html"
			}
		}
		/* 登录认证，如果没有登录，就不会跳转到cart.html页面 */
		function cartAuth(){
			if(localStorage.getItem("accessToken")==null){
				alert("您还没有登录")
			}else{
				window.location.href = "cart.html"
			}
		}
		<!-- 导航栏的JS-结束 -->
	</script>
</head>

<body>
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Top Start -->
        <div class="header-top bg-name-primary">
            <div class="container">
                <div class="row align-items-center">

					<!-- Header Top Message Start -->
					<div class="col-12 col-lg-6">
					    <div class="header-top-msg-wrapper">
					        <a href="index.html" class="header-top-message">欢迎来到萌宠奇遇!</a>
					    </div>
					</div>
					<div class="col-12 col-lg-6">
					    <div class="header-top-settings">
							<a onclick="logout()" style="font-size: small; float: right; color: white;"> 退出登录 </a>
					        <a href="register.html" style="font-size: small; float: right; color: white;"> 注册&nbsp;&nbsp;|&nbsp;&nbsp; </a>
					        <a href="login.html" style="font-size: small; float: right; color: white;"> 登录&nbsp;&nbsp;|&nbsp;&nbsp;</a>
					    </div>
					</div>
					<!-- Header Top Message End -->

                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="main-menu">
                                <ul>
                                    <li class="has-children">
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li class="has-children position-static">
                                         <a href="#">萌宠商城</a>
                                        <ul class="mega-menu" id="itemCat">
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">狗狗</h4>
                                                <ul class="m-b-n10" id="dog">
                                                    
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">猫咪</h4>
                                                <ul class="m-b-n10" id="cat">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <h4 class="mega-menu-title">其他</h4>
                                                <ul class="m-b-n10" id="other">
                                                   
                                                </ul>
                                            </li>
                                            <li class="mega-menu-col">
                                                <div class="megamenu-image">
                                                    <a href="shop.html">
                                                        <img class="fit-image" src="assets/images/header/mega-menu.png" alt="Megamenu Image">
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="has-children">
                                        <a href="forum.html">萌宠论坛</a>
                                    </li>
                                    <li class="has-children">
                                        <a href="diary.html">萌宠日记</a>
                                    </li>
                                    <li><a href="login.html">登录</a></li>
                                    <li><a href="register.html">注册</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-lg-3 col-md-8 col-6">
                            <div class="header-actions">

                                <!-- Header Action Search Button Start -->
                                <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                    <div class="action-execute">
                                        <a class="action-search-open" href="javascript:void(0)"><i class="icon-magnifier icons"></i></a>
                                        <a class="action-search-close" href="javascript:void(0)"><i class="ti-close"></i></a>
                                    </div>
                                    <!-- Search Form and Button Start -->
                                    <form class="header-search-form" >
                                        <input type="text" class="header-search-input" placeholder="搜索商品" value="" id="search">
                                        <button class="header-search-button" onclick="searchItem()"><i class="icon-magnifier icons"></i></button>
                                    </form>
                                    <!-- Search Form and Button End -->
                                </div>
                                <!-- Header Action Search Button End -->

                                <!-- Header My Account Button Start -->
                                <a onclick="accountAuth()" class="header-action-btn header-action-btn-wishlist"">
                                    <i class="icon-user icons"></i>
                                </a>
                                <!-- Header My Account Button End -->

                                <!-- Header Action Button Start -->
                                <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                    <a onclick="cartAuth()" class="cart-visible">
                                        <i class="icon-handbag icons"><span style="font-size: medium;">&nbsp;购物车</span></i>
                                    </a>
                                </div>
                                <!-- Header Action Button End -->
                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

    </div>
    <!-- Header Section End -->


    </div>
    <!-- Header Section End -->
    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">宠物论坛</h2>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li>论坛详情</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- Blog Details Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 m-auto overflow-hidden">
<!-- 话题详情模块 -->
                    <!-- Blog Details Wrapper Start -->
                    <div class="blog-details-wrapper" id="app">

                        <!-- Blog Details Content Start -->
                        <div class="blog-details-content">
                            <!-- Blog details title & Meta Start -->
                            <div class="blog-details-title-meta">
                                <h2 class="title" v-text="topic.title"></h2>
                                <ul class="blog-meta">
                                    <li>By: <a href="#/" v-text="topic.username"></a> <span v-text="$options.filters.formatDate(topic.created)"></span></li> 
                                    <li v-text="topic.count"></li>评论
                                </ul>
                            </div>
                            <!-- Blog details title & Meta End -->

                            <!-- Content Start -->
                            <p v-text="topic.descriptions">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <!-- Blog Details Tags & Social Shear Start -->
                            <div class="blog-details-tag-social m-b-n20">

                                <!-- Social Shear Start -->
                                <div class="social-share m-b-20">
                                    <div class="widget-social">
                                        <span>Share: </span>
                                        <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                        <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                        <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                        <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                        <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                                    </div>
                                </div>
                                <!-- Social Shear End -->

                            </div>
                            <!-- Blog Details Tags & Social Shear End -->
                        </div>
                        <!-- Blog Details Content End -->
<!-- 评论展示模块 -->
                        <!-- Blog Details Comments area Start -->
                        <div class="blog-details-comment-area m-b-n30">
                            <h2 class="blog-desc-title m-b-30 m-t-40">评论区</h2>
							<hr />
                            <div class="blog-details-comment-wrapper m-b-30" v-for="comment in commentList">
                                <!-- <div class="thumb">
                                    <img class="fit-image" src="assets/images/blog/small-size/95x95.jpg" alt="Blog Review">
                                </div> -->
								<el-card class="box-card">
									<div>
										<p v-text="comment.content"></p>
										<div style="float: right;">
											By: <b><span class="title" v-text="comment.username"></span></b> 
											- &nbsp;<span v-text="$options.filters.formatDate(comment.created)"></span>
										</div>
									</div>
								</el-card>
                            </div>
                        </div>
                        <!-- Blog Details Comments area End -->
<!-- 评论发布模块 -->
                        <!-- Comments Post Area Start -->
                        <div class="comment-post-area">
                            <h2 class="blog-desc-title m-b-30 p-t-40">发表评论</h2>
                            <form action="#">
                                <div class="row">

                                    <!-- Message Input Start -->
                                    <div class="col-12 col-custom">
                                        <div class="input-item m-b-20">
                                            <textarea cols="30" rows="10" name="content" class="rounded-0 w-100 custom-textarea input-area" placeholder="评论信息" spellcheck="false" data-gramm="false" v-model="addComment.content"></textarea>
                                        </div>
                                    </div>
                                    <!-- Message Input End -->

                                    <!-- Submit Button Start -->
                                    <div class="col-12 col-custom m-t-20">
                                        <button type="submit" class="btn btn-primary btn-hover-dark" @click.prevent="saveComment">发布评论</button>
                                    </div>
                                    <!-- Submit Button End -->

                                </div>
                            </form>
                        </div>
                        <!-- Comments Post Area End -->

                    </div>
                    <!-- Blog Details Wrapper End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Details Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
                <div class="row m-b-n40">
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1000">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">About Us</h1>
                            <p class="desc-content">Lorem ipsum dolor sit amet, co adipisi elit, sed eiusmod tempor incididunt ut labore et dolore</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start m-b-n10">
                                <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1200">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Useful Links</h2>
                            <ul class="widget-list">
                                <li><a href="wishlist.html">Help & Contact Us</a></li>
                                <li><a href="contact.html">Returns & Refunds</a></li>
                                <li><a href="contact.html">Online Stores</a></li>
                                <li><a href="contact.html">Terms & Conditions</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1400">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Help</h2>
                            <ul class="widget-list">
                                <li><a href="wishlist.html">Wishlist</a></li>
                                <li><a href="contact.html">Pricing Plans</a></li>
                                <li><a href="contact.html">Order Traking</a></li>
                                <li><a href="contact.html">Returns</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1600">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Send newsletter</h2>
                            <div class="widget-body">
                                <p class="desc-content m-b-20">Subscribe to our newsletter and get 10% off your first purchase..</p>
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap p-t-5">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">Send</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-name-light p-t-20 p-b-20">
            <div class="container">
                <div class="row align-items-center m-b-n20">
                    <div class="col-md-6 text-center text-md-start order-2 order-md-1 m-b-20">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>
                    <div class="col-md-6 text-center text-md-end order-1 order-md-2 m-b-20">
                        <div class="payment">
                            <a href="#/">
                                <img class="fit-image" src="assets/images/payment/payment_large.png" alt="Payment">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->

    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="quick-view" tabindex="-1" aria-labelledby="quick-view" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-md-6 col-12">

                        <!-- Product Details Image Start -->
                        <div class="modal-product-carousel">

                            <!-- Single Product Image Start -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-product/1.png" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-product/2.png" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-product/3.png" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-product/4.png" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="assets/images/products/large-product/5.png" alt="Product">
                                    </a>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <!-- <div class="swiper-pagination d-md-none"></div> -->
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-button-next swiper-button-next"><i class="ti-arrow-right"></i></div>
                                <div class="swiper-product-button-prev swiper-button-prev"><i class="ti-arrow-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>
                            <!-- Single Product Image End -->

                        </div>
                        <!-- Product Details Image End -->

                    </div>
                    <div class="col-md-6 col-12 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery position-relative">

                            <!-- Product Head Start -->
                            <div class="product-head m-b-15">
                                <h2 class="product-title">Single Product Slider</h2>
                            </div>
                            <!-- Product Head End -->

                            <!-- Rating Start -->
                            <span class="rating justify-content-start m-b-10">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                            <i class="fa fa-star-o"></i>
                        </span>
                            <!-- Rating End -->

                            <!-- Price Box Start -->
                            <div class="price-box m-b-10">
                                <span class="regular-price">$70.00</span>
                                <span class="old-price"><del>$85.00</del></span>
                            </div>
                            <!-- Price Box End -->

                            <!-- SKU Start -->
                            <div class="sku m-b-15">
                                <span>SKU: 12345</span>
                            </div>
                            <!-- SKU End -->

                            <!-- Product Inventory Start -->
                            <div class="product-inventroy m-b-15">
                                <span class="inventroy-title"> <strong>Availability:</strong></span>
                                <span class="inventory-varient">12 Left in Stock</span>
                            </div>
                            <!-- Product Inventory End -->

                            <!-- Description Start -->
                            <p class="desc-content m-b-25">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                            <!-- Description End -->

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25">
                                <span class="m-r-10"><strong>Qty: </strong></span>
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" value="1" type="text">
                                    <div class="dec qtybutton"></div>
                                    <div class="inc qtybutton"></div>
                                </div>
                            </div>
                            <!-- Quantity End -->

                            <!-- Cart Button Start -->
                            <div class="cart-btn action-btn m-b-30">
                                <div class="action-cart-btn-wrapper d-flex justify-content-start">
                                    <div class="add-to_cart">
                                        <a class="btn btn-primary btn-hover-dark rounded-0" href="cart.html">Add to cart</a>
                                    </div>
                                    <a href="wishlist.html" title="Wishlist" class="action"><i class="ti-heart"></i></a>
                                </div>
                            </div>
                            <!-- Cart Button End -->

                            <!-- Social Shear Start -->
                            <div class="social-share">
                                <div class="widget-social justify-content-center m-b-30">
                                    <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>
                                    <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>
                                    <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>
                                    <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>
                                    <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>
                                </div>
                            </div>
                            <!-- Social Shear End -->

                            <!-- Payment Option Start -->
                            <div class="payment-option m-t-20 d-flex justify-content-start">
                                <span><strong>Payment: </strong></span>
                                <a href="#">
                                    <img class="fit-image m-l-5" src="assets/images/payment/payment_large.png" alt="Payment Option Image">
                                </a>
                            </div>
                            <!-- Payment Option End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top show" id="scroll-top">
        <i class="arrow-top ti-angle-double-up"></i>
        <i class="arrow-bottom ti-angle-double-up"></i>
    </a>
    <!-- Scroll Top End -->

    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="fa fa-times"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">
                <!-- Mobile Menu Search Box Start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                        <button class="search-btn"><i class="icon-magnifier"></i></button>
                    </form>
                </div>
                <!-- Mobile Menu Search Box End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                    <li><a href="index-3.html">Home Three</a></li>
                                    <li><a href="index-4.html">Home Four</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="error-404.html">Error 404</a></li>
                                    <li><a href="my-account.html">My Account</a></li>
                                    <li><a href="login.html">Login | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr m-b-30">
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <h4 class="title">Language:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <h4 class="title">Currency:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner Wrapper End -->

        </div>
        <!-- Mobile Menu Inner End -->
    </div>
    <!-- Mobile Menu End -->

    <!-- Use the minified version files listed below for better performance and remove the files listed above -->

    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!--Main JS-->
    <script src="assets/js/main.js"></script>
	
	<script src="static/jquery.params.js"></script>
	<script src="static/vue.js"></script>
	<script src="static/element-ui.js"></script>
	<script src="static/axios.min.js"></script>
	<script>
		var forumHost = "http://localhost:3001/forumservice"
		let app = new Vue({
			el: "#app",
			data: {
				topic: {
					// 获取页面跳转时传递的参数
					id: $.query.get("id"),
					username: '',
					title: '',
					count: 0,
					descriptions: '',
					created: ''
				},
				commentList: [],
				addComment: {
					id: '',
					topicId: '',
					content: '',
					username: '',
					created: ''
				}
				
			},
			// 设置过滤器, 后端传值时, 经过滤器处理后,显示到页面
			filters: {
				formatDate: function(dateStr){
					//得到特定的时间
					var date = new Date(dateStr);
					var year = date.getFullYear();
					//ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
					var month = date.getMonth()+1<10 ? '0'+ (date.getMonth()+1) : date.getMonth()+1;
					var day = date.getDate()<10 ? '0' + date.getDate() : date.getDate();
					var hh = date.getHours()<10 ? '0' + date.getHours() : date.getHours();
					var mm = date.getMinutes()<10 ? '0' + date.getMinutes() : date.getMinutes();
					var ss = date.getSeconds()<10 ? '0' + date.getSeconds() : date.getSeconds();
						 
					return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
				}
			},
			methods: {
				async findTopicById() {
					// alert("获取页面数据")
					// debugger
					let {data: result} = await axios.get(`${forumHost}/forum/topic/findTopicById?id=${this.topic.id}`)
					console.log(result)
					this.topic = result.data
				},
				// 根据话题id查询所有评论信息
				async findAllCommentByTopicId() {
					// alert("获取页面数据")
					// debugger
					let {data: result} = await axios.get(`${forumHost}/forum/comment/findAllCommentByTopicId?id=${this.topic.id}`)
					console.log(result)
					this.commentList = result.data
				},
				async saveComment() {
					// alert("获取页面数据")
					// debugger
					// alert(this.addComment.username)
					if(this.addComment.username === null || this.addComment.username === ""){
						alert("请先登录~~~")
						location.href="login.html"
					}else if(this.addComment.content==="" || this.addComment.content === null){
						alert("请输入评论消息")
					}else{
						let date = new Date()
						this.addComment.created = date
						this.addComment.topicId = $.query.get("id")
						let {data: result} = await axios.post(forumHost +"/forum/comment/saveComment", this.addComment)
						// location.href=`./blog-details.html?id=${$.query.get("id")}`
						console.log(result)
						this.addComment = ''
						// 发布评论后, 刷新评论组件
						location.reload();
					}
				},
				// 获取当前登录的用户名
				getUserName() {
					this.addComment.username = sessionStorage.getItem("userName")
				}
			},
				
			mounted() {
				this.getUserName()
				this.findTopicById()
				this.findAllCommentByTopicId()
			}
		})
	</script>
</body>

</html>